.map-container {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.map-image {
    width: 100%;
    height: auto;
}

/* Styles for each location */
.location {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: rgba(12, 7, 7, 0.5); /* Semi-transparent red */
    border: 1px solid black;
    border-radius: 50%;
    cursor: pointer;
}



/* Adjust the positions of the locations manually */
.sadnavar { top: 34.5%; left: 46.6%; }
.butterberd { top: 16.4%; left: 84%; }
.patts { top: 11%; left: 13.5%; }
.tiberia { top: 29.2%; left: 34.9%; }
.las-flores { top: 94.5%; left: 57%; }
.islas-oeste { top: 28%; left: 5%; }
.printea { top: 86.4%; left: 73.5%; }
.cipella { top: 73.8%; left: 32%; }
.trovaos { top: 19.7%; left: 51.7%; }
.arsim { top: 32%; left: 52.5%; }
.verhim { top: 21.5%; left: 25.7%; }
.pickers { top: 32.2%; left: 43.6%; }
.bastion-olvidado { top: 9%; left: 54.5%; }
.paso-helado {top: 17%; left:18%}
.montañas-galur {top: 23%; left:40%}
.bredo{top: 42.5%; left: 31.9%;}
.kalem{top: 16%; left: 64.7%}
.castor{top: 20.4%; left: 79.6%;}
.greendown{top: 88.2%; left: 57.3%;}
.prontos{top: 86.2%; left: 38.4%;}
.espinada{top: 81%; left: 50.6%;}
.merino{top: 78%; left: 79.1%;}
.piermont{top: 72%; left: 59.5%;}
.aguada{top: 72.2%; left: 72.5%;}
.barti{top: 67.3%; left: 40.6%;}
.ankara{top: 63.9%; left: 43.6%;}
.bosque-susurros{top: 15%; left: 54.5%;}
.paso-mago{top: 14.5%; left: 60.5%;}
.montañas-partanas{top: 18%; left: 73%;}
.montes-ank{top: 48.5%; left: 48.9%;}
.lago-negro{top: 50.8%; left: 59.9%;}
.puente-concilio{top: 52.9%; left: 63.6%;}
.cienaga-bruja{top: 60%; left: 49.6%;}
.picos-desvelo{top: 72%; left: 52.5%;}
.bosque-lobos{top: 82.7%; left: 59.3%;}
.bosque-dioses{top: 9%; left: 94%;}
.paso-dioses{top: 14.9%; left: 86%;}
.lago-sucio{top: 83.8%; left: 49.3%;}




/* Modal styles */
.modal {
    display: none; /* El modal está oculto por defecto */
    position: fixed;
    z-index: 20;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
     /* Fondo semitransparente */
    z-index: 9999999;
}

.modal-content {
    background-color: rgba(0, 0, 0, 0.7); ;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    text-align: center;
    border-radius: 8px;
    color: rgb(255, 255, 255);
    text-align: justify;
}

.close {
    color: #f7984b;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
}

/* Responsive styles */
@media (max-width: 768px) {
    .map-container {
        max-width: 90%;
    }

    .modal-content {
        width: 90%;
    }
}